<template>
  <div>
    <van-cell
      v-for="(item, index) in hightLightSuggestions"
      :key="index"
      :title="item"
      icon="search"
      @click="$emit('update-keywords', suggestions[index])"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
//当keywords发生变化的时候 发生了什么
//1.决定渲染搜索建议组件
//2.监视keywords发生变化 请求搜索建议
import { getSuggestionsAPI } from "@/api";

import { debounce } from "lodash";
export default {
  data() {
    return {
      suggestions: [],
    };
  },

  computed: {
    //map 方法  返回值 跟原来数组一样长的新数组

    //动态正则
    //字面量 /a/ 缺点 正则公式写死的

    //字符串 replace 返回值 替换的新字符串
    hightLightSuggestions() {
      const reg = new RegExp(this.keywords, "ig");

      return this.suggestions.map((str) => {
        //item: Angular

        return str.replace(
          reg,
          (match) => `<span style='color:red'>${match}</span>`
        );
      });
    },
  },

  props: {
    keywords: {
      type: String,
      required: true,
    },
  },

  watch: {
    //监视属性
    //1.函数式 2.对象的写法也可以写再handler-找methods身上找方法
    keywords: {
      handler: "getSearchSuggestions",
      immediate: true,
    },
  },

  methods: {
    getSearchSuggestions: debounce(async function () {
        const { data } = await getSuggestionsAPI(this.keywords);
       // console.log(data); //数组里面null全去掉 //版本一：
       // this.suggestions = data.data.options.filter((item) => item !== null) 
       //版本二： // this.suggestions = data.data.options.filter((item) => Boolean(item))
        //版本三： // window.Boolean = function(arg1) {return boolean}
      this.suggestions = data.data.options.filter(Boolean);
    }, 1000),

    //正常写的
    //  getSearchSuggestions() {
    //     clearTimeout(this.id)
    //     //防抖 在频繁时间内只执行一次  1.用定时器包裹 2.清除上一次定时器
    //     this.id = setTimeout(  async () => {
    //         const { data } = await getSuggestionsAPI(this.keywords)
    //     // console.log(data);
    //     //数组里面null全去掉
    //     //版本一：
    //     // this.suggestions = data.data.options.filter((item) => item !== null)
    //     //版本二：
    //     // this.suggestions = data.data.options.filter((item) => Boolean(item))
    //     //版本三：
    //     // window.Boolean = function(arg1) {return boolean}
    //         this.suggestions = data.data.options.filter(Boolean)
    //     } , 1000)

    // }
  },
};
</script>
 
<style>
</style>